<template>
  <div class="login_submit">
    <el-form
      status-icon
      label-width="100px"
      :model="dynamicValidateForm"
      ref="dynamicValidateForm"
      class="demo-ruleForm"
    >
      <p>电子邮件地址 *</p>
      <p>
        <el-form-item
          prop="email"
          label-width="0"
          :rules="[
            { required: true, message: '请输入邮箱地址', trigger: 'blur' },
            {
              type: 'email',
              message: '请输入正确的邮箱地址',
              trigger: ['blur', 'change'],
            },
          ]"
        >
          <el-input
            v-model="dynamicValidateForm.email"
            placeholder="请输入邮箱账户,如:1234*@qq.com"
            @blur="leave"
          ></el-input>
        </el-form-item>
      </p>
      <p>密码 *</p>
      <p>
        <el-form-item
          label-width="0"
          prop="pass"
          :rules="[
            { required: true, message: '请输入密码', trigger: 'blur' },
            {
              min: 6,
              max: 18,
              message: '长度在 6 到 18 字符',
              trigger: 'blur',
            },
          ]"
        >
          <el-input
            type="password"
            v-model="dynamicValidateForm.pass"
            autocomplete="off"
          ></el-input>
        </el-form-item>
      </p>
      <div class="login_box1">
        <el-button type="primary" @click="register" round> 注册 </el-button>
        <!-- @click="submitForm('dynamicValidateForm')" -->
      </div>
    </el-form>
  </div>
</template>
<script>
import { reg, checkemail } from '@/api';
export default {
  name: 'login',
  data() {
    return {
      dynamicValidateForm: {
        email: '',
        pass: '',
      },
    };
  },
  methods: {
    async leave() {
      const re1 = await checkemail({
        email: this.dynamicValidateForm.email,
      });
      console.log(re1.data.code);
      if (re1.data.code == 0) {
        this.$message.error('此用户已注册');
      }
    },

    register() {
      this.$refs.dynamicValidateForm.validate(async (valid) => {
        if (!valid) return this.$message.error('邮箱书写不正确');
        const res = await reg({
          email: this.dynamicValidateForm.email,
          pwd: this.dynamicValidateForm.pass,
        });
        if (res.data.code == 1) {
          this.$message({
            message: '恭喜你注册成功',
            type: 'success',
          });
        } else {
          this.$message.error('信息填写错误');
        }
      });
    },
  },
};
</script>
<style lang="scss" scoped>
button {
  font-weight: bold;
}

.login_submit {
  padding: 10px;
  box-sizing: border-box;
  .demo-ruleForm {
    padding: 20px;
    border: 1px solid #ebebeb;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
    border-radius: 10px;
  }
  .login_box1 {
    display: flex;
    justify-content: flex-end;
    .a_font {
      font-size: 13px;
      color: #000;
      text-decoration: none;
      line-height: 39px;
    }
    div {
      .login_span1 {
        margin-left: 5px;
        margin-right: 15px;
      }
    }
  }
}
</style>
